import { useComponentsStore } from "@/stores/edit-pages-store";
import { Select } from "antd";
import { useEffect, useState } from "react";
interface TableColumnSelectorProps {
  value?: string[];
  onChange?: Function
}
export function TableColumnSelector(props: TableColumnSelectorProps){
  const { onChange, value} = props;
  const { curComponent} = useComponentsStore();
  const [selectValue, setSelectValue]=useState<string[]>([])
  useEffect(()=>{
    setSelectValue(value || [])
  }, [value])
  const options = (curComponent?.body || []).filter(ele=>ele.name!=="TableOperationColumn").map(ele=>({
    label: ele.props.title || '未命名',
    value: ele.props.dataIndex
  }))
  function handleChange(val: string[]) {
    onChange?.(val);
  }
  return <Select mode="multiple" value={selectValue} onChange={handleChange} options={options}/>
}